import Search from './search.js'

export default {
    components: {
        Search
    },
    data() {
        return {
            categories: [
                { name: 'Casual', img: './imgs/casual.webp', typeId: 14 },
                { name: 'Puzzle', img: './imgs/puzzle.webp', typeId: 2 },
                { name: 'Action', img: './imgs/action.webp', typeId: 8 },
                { name: 'Adventure', img: './imgs/adventure.webp', typeId: 10 },
                { name: 'Sports', img: './imgs/sports.webp', typeId: 4 },
                { name: 'Strategy', img: './imgs/strategy.webp', typeId: 12 },
            ],
            showCate: false,
            showSearch: false,
            initSearchText: ''
        }
    },
    computed: {
        searchIcon() {
            return this.showSearch ? './imgs/close.svg' : './imgs/search.svg'
        }
    },
    created() {
        this.initSearchText = this.getQueryVariable('keywords') ? this.getQueryVariable('keywords') : ''
    },
    methods: {
        typePath(item) {
            return `type.html?name=${item.name}&id=${item.typeId}`
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }
    },
    template: `
        <div class="header">
            <header>
            <div class="header-main">
                <!-- mobile start -->
                <div class="header-menu" @click="showCate = true">
                    <img src="./imgs/menu.svg" alt="menu" width="20px">
                </div>
                <div class="header-search" @click="showSearch = !showSearch">
                    <img :src="searchIcon" alt="search" width="20px">
                </div>
                <!-- mobile end -->
                <div class="header-logo">
                    <a href="/">
                        <span>example.com</span>
                    </a>
                </div>
                <div class="header-cate">
                    <ul>
                        <li v-for="cate in categories">
                            <a class="header-cate-item" :href="typePath(cate)">
                                <img class="header-cate-item_img" :src="cate.img" :alt="cate.name" width="15">
                                <span class="header-cate-item_img">{{cate.name}}</span>
                            </a>
                        </li>
                    </ul>
                    <div class="header-open" @click="showCate = true">
                        <div></div>
                    </div>
                </div>
            </div>

            <div class="siderbar" v-show="showCate">
                <div class="siderbar-categories">
                    <span>Category</span>
                    <ul>
                        <li v-for="cate in categories">
                            <a :href="typePath(cate)" class="siderbar-cate-item">
                                <img class="siderbar-cate-item_img" :src="cate.img" :alt="cate.name" width="15">
                                <span class="siderbar-cate-item_img">{{cate.name}}</span>
                            </a>
                        </li>
                    </ul>
                    <div class="siderbar-close" @click="showCate = false"></div>
                </div>
                <div class="siderbar-mask" @click="showCate = false"></div>
            </div>
        </header>

        <Search :init-text="initSearchText" v-if="showSearch"></Search>

        </div>
    `
}